<template>
    <!-- header部分 -->
    <header class="header">
        <div class="headerTop ">
            <div class="content container">
                <div class="conLeft">
                    <ul>
                        <li><a href="">首页</a></li>
                        <li><a href="">小满数码官网</a></li>
                        <li><a href="">优购码</a></li>
                        <li><a href="">企业购</a></li>
                        <li><a href="">SelectRegion</a></li>
                        <li><a href="">
                                更多精彩:
                            </a>
                            <select name="" id="">
                                <option value="">HarmonyOS </option>
                                <option value="">应用市场</option>
                                <option value="">华为终端云空间</option>
                                <option value="">开发者联盟</option>
                            </select>

                        </li>
                    </ul>
                </div>
                <div class="cartRight">
                    <ul class="ull" id="ull">
                        <li v-if="isLogin" @click="goCart">
                            <i class="el-icon-shopping-cart-2 icon"></i>
                            <a href="javascript:;">购物车数量:({{cart_sum}})</a>
                        </li>
                        <li v-if="isLogin">
                            <a href="javascript">{{welcome}}</a>
                            <a @click="goLogout" href="javascript:;">退出登陆</a>
                        </li>
                        <li v-else>
                            <a href="javascript:;" @click="regis">注册</a>
                            <a href="javascript:;" @click="goLogin">已有账号?请登录</a>
                        </li>

                        <li><a href="javascript:;">我的订单</a></li>
                        <li><a href="javascript:;">客服</a></li>
                        <li><a href="javascript:;">网站导航</a></li>
                        <li><a href="javascript:;">手机版</a></li>

                    </ul>
                </div>
            </div>
            <!-- <slot>Header</slot> -->
        </div>
        <div class="headerBottom ">
            <div class="con container">
                <div class="logoLeft" @click="goIndex">
                    <img src="./images/红色logo.png" alt="" />

                </div>
                <div class="navCenter">
                    <ul>
                        <li><a href="">华为专区</a></li>
                        <li><a href="">鸿蒙智联</a></li>
                        <li><a href="">莫塞尔</a></li>
                        <li><a href="">华为智选</a></li>
                        <li><a href="">HarmonyOS</a></li>
                        <li><a href="">特惠企采</a></li>
                        <li><a href="">教育购</a></li>
                    </ul>
                </div>
                <div class="searchRight">
                    <input type="text" placeholder="请输入你要搜索的商品">
                    <i class="iconfont icon-sousuo"></i>
                </div>
            </div>

        </div>
        <!-- <slot>Header</slot> -->
        <!-- 侧边栏 -->
        <div class="sideBar">
            <ul>
                <li>
                    <i class="iconfont icon-gouwuche"></i>

                    <a href="">
                        <div>购物车</div>

                    </a>
                </li>
                <li>
                    <i class="iconfont icon-kefu"></i>

                    <a href="">
                        <div>在线客服</div>
                    </a>
                </li>
                <li>
                    <i class="iconfont icon-tubiaozhizuomoban-47"></i>
                    <a href="">
                        <div>自助服务</div>
                    </a>
                </li>
                <li>
                    <i class="iconfont icon-fanhuidingbu"></i>
                    <a href="">
                        <div>回到顶部</div>
                    </a>
                </li>
            </ul>
        </div>
    </header>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
export default {
    name: "Header",
    data() {
        return {
            // cartNum: 0,
            cart_sum:0,
        }
    },
    computed: {
        //注意需要写上具体的模块化的文件
        //页面上直接显示内容的放在计算属性里面
        ...mapState("user", ["isLogin"]),
        ...mapGetters("user", ["welcome"]),
        cartNum(){
            this.$bus.$on('newValue',(data)=>{
                //console.log(data);
                return data
            })
        }
    },
    methods: {
        //页面上需要方法的去展示的
        ...mapMutations("user", ["logout"]),
        //跳转登陆
        goLogin() {
            this.$router.push({
                name: "login",
            })
        },
        //退出登陆 将isLogin赋值为false,并且将会话存储的内容进行全部清除,使用clear方法
        goLogout() {
            this.logout();
        },
        //去注册
        regis() {
            this.$router.push({
                name: "register",
            })
        },
        //跳到首页
        goIndex() {
            this.$router.push({
                name: "Index",
            })
        },
        goCart() {
            this.$router.push({
                name: "cart",
            })
        },

    },
     mounted() {
   this.cart_sum=  JSON.parse(sessionStorage.getItem("cart_sum"))
   //console.log(this.cart_sum);
    },

}

</script>

<style lang="scss" scoped>
@charset 'utf-8';
@import '../../../public/scss/common.scss';

//vw单位响应式布局
@function get($a) {
    @return ($a/1920)*100+vw
}



.header {
    width: get(1920);
    height: get(140);
    background-color: #fff;
    //position: fixed;
    // top: 0;
    // left: 50%;
    // transform: translateX(-50%);
    z-index: 999;

    //headerTop
    >.headerTop {
        overflow: hidden;
        background-color: #000;

        >.content {
            height: get(64);
            @extend.common1;

            //首页导航
            >.conLeft {

                >ul {
                    height: get(64);
                    //background-color: #fff;
                    @extend.common1;

                    >li {
                        padding: 0 get(10);

                        >a {
                            color: #fff;
                            opacity: .6;
                            letter-spacing: get(1);
                            text-decoration: none;

                            &:hover {
                                opacity: 1;
                            }
                        }
                    }
                }
            }

            //购物车导航
            >.cartRight {
                >.ull {
                    height: get(64);
                    //background-color: #fff;
                    @extend.common1;

                    >li {
                        padding: 0 get(10);
                        color: #fff;

                        //opacity: .6;
                        >.icon {
                            font-size: get(10);
                            color: #fff;

                        }

                        >a {
                            color: #fff;
                            opacity: .6;
                            letter-spacing: get(1);
                            text-decoration: none;
                            padding: 0 get(4);

                            &:hover {
                                color: #fff !important;
                                opacity: 1;
                            }
                        }

                        &:hover {

                            // background-color: #fff;
                            a {
                                color: #fff;
                            }
                        }
                    }
                }

            }
        }

    }



    >.headerBottom {

        overflow: hidden;
        background-color: #fff;


        >.con {
            height: get(90);
            @extend.common1;

            >.logoLeft {
                >img {
                    width: get(160);

                }

            }

            >.navCenter {
                >ul {
                    @extend.common1;

                    >li {
                        padding: 0 get(20);

                        >a {
                            font-size: get(24);
                            color: #000;
                            opacity: .8;
                            font-weight: bold;
                            letter-spacing: get(1);

                            &:hover {
                                color: $color;
                            }
                        }

                    }
                }
            }

            >.searchRight {
                overflow: hidden;
                @extend.common1;

                >input {
                    border-radius: get(20);
                    height: get(26);
                    margin-right: get(10);

                }

                >.iconfont {
                    font-size: get(24);
                }
            }
        }


    }

    //侧边栏 固定定位
    >.sideBar {
        overflow: hidden;
        display: block;
        background-color: #fff;
        position: fixed;
        top: get(400);
        right: get(80);
        z-index: 9999 !important;

        >ul {
            border-radius: get(10);
            background-color: #fff;

            >li {
                //border: 1px solid $color;


                >.iconfont {
                    font-size: get(40);
                    color: $color;
                }

                >a {
                    font-size: get(16);
                }

            }
        }
    }



}
</style>
